<template>
  <headers :pageStatus="pageStatus" @changeHide="changeViewDialog" />
  <div class="box" ref="box" @contextmenu="pageStatus.table = true">
    <div class="left" v-show="pageStatus.layer || pageStatus.sources">
      <div class="mid">
        <div class="topBox" v-show="pageStatus.layer">
          <layer
            @changeHide="changeLayerHide"
            @onNodeMenuItem="storeNodeMenuItem"
          />
        </div>
        <div class="move" v-show="pageStatus.layer && pageStatus.sources"></div>
        <div class="downBox" v-show="pageStatus.sources">
          <sources ref="mapLayer" @changeHide="changeSourcesHide" 
          @onNodeMenuItem="layerNodeMenuItem"
           />
        </div>
      </div>
    </div>
    <div class="resize" v-show="pageStatus.layer || pageStatus.sources"></div>
    <div class="mid center-status" style="flex: 1">
      <div class="topBox">
        <maps />
      </div>
      <div class="move" v-show="pageStatus.FeatureTable"></div>
      <div class="downBox" v-show="pageStatus.FeatureTable">
        <FeatureTable ref="mapTable" @changeHide="changeHide" />
      </div>
    </div>
    <div
      class="resize-r"
      v-show="pageStatus.rgLayer || pageStatus.rgSource"
    ></div>
    <div class="right" v-show="pageStatus.rgLayer || pageStatus.rgSource">
      <div class="mid">
        <div class="topBox" v-show="pageStatus.rgLayer">
          <rgLayer @changeHide="changeRgLayerHide" />
        </div>
        <div
          title="上下侧边栏"
          class="move"
          v-show="pageStatus.rgLayer && pageStatus.rgSource"
        ></div>
        <div class="downBox" v-show="pageStatus.rgSource">
          <rgSource @changeHide="changeRgSourcesHide" />
        </div>
      </div>
    </div>
  </div>
</template>
 
 
<script setup>
import { arrowMiddleware } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import layer from "./components/mapStore.vue";
import sources from "./components/mapLayer.vue";
import rgLayer from "./components/mapTools.vue";
import rgSource from "./components/mapInfo.vue";
import maps from "./components/map.vue";
import FeatureTable from "./components/mapTable.vue";
import headers from "./components/header.vue";

const value = ref([]);

const handleChange = (value) => {
  console.log(value);
};
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
const props = {};

const mapLayer=ref(null);
const mapTable=ref(null);

const options = [
  {
    value: "guide",
    label: "Guide",
    children: [
      {
        value: "disciplines",
        label: "Disciplines",
        children: [
          {
            value: "consistency",
            label: "Consistency",
          },
          {
            value: "feedback",
            label: "Feedback",
          },
          {
            value: "efficiency",
            label: "Efficiency",
          },
          {
            value: "controllability",
            label: "Controllability",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "side nav",
            label: "Side Navigation",
          },
          {
            value: "top nav",
            label: "Top Navigation",
          },
        ],
      },
    ],
  },
  {
    value: "component",
    label: "Component",
    children: [
      {
        value: "basic",
        label: "Basic",
        children: [
          {
            value: "layout",
            label: "Layout",
          },
          {
            value: "color",
            label: "Color",
          },
          {
            value: "typography",
            label: "Typography",
          },
          {
            value: "icon",
            label: "Icon",
          },
          {
            value: "button",
            label: "Button",
          },
        ],
      },
      {
        value: "form",
        label: "Form",
        children: [
          {
            value: "radio",
            label: "Radio",
          },
          {
            value: "checkbox",
            label: "Checkbox",
          },
          {
            value: "input",
            label: "Input",
          },
          {
            value: "input-number",
            label: "InputNumber",
          },
          {
            value: "select",
            label: "Select",
          },
          {
            value: "cascader",
            label: "Cascader",
          },
          {
            value: "switch",
            label: "Switch",
          },
          {
            value: "slider",
            label: "Slider",
          },
          {
            value: "time-picker",
            label: "TimePicker",
          },
          {
            value: "date-picker",
            label: "DatePicker",
          },
          {
            value: "datetime-picker",
            label: "DateTimePicker",
          },
          {
            value: "upload",
            label: "Upload",
          },
          {
            value: "rate",
            label: "Rate",
          },
          {
            value: "form",
            label: "Form",
          },
        ],
      },
      {
        value: "data",
        label: "Data",
        children: [
          {
            value: "table",
            label: "Table",
          },
          {
            value: "tag",
            label: "Tag",
          },
          {
            value: "progress",
            label: "Progress",
          },
          {
            value: "tree",
            label: "Tree",
          },
          {
            value: "pagination",
            label: "Pagination",
          },
          {
            value: "badge",
            label: "Badge",
          },
        ],
      },
      {
        value: "notice",
        label: "Notice",
        children: [
          {
            value: "alert",
            label: "Alert",
          },
          {
            value: "loading",
            label: "Loading",
          },
          {
            value: "message",
            label: "Message",
          },
          {
            value: "message-box",
            label: "MessageBox",
          },
          {
            value: "notification",
            label: "Notification",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "menu",
            label: "Menu",
          },
          {
            value: "tabs",
            label: "Tabs",
          },
          {
            value: "breadcrumb",
            label: "Breadcrumb",
          },
          {
            value: "dropdown",
            label: "Dropdown",
          },
          {
            value: "steps",
            label: "Steps",
          },
        ],
      },
      {
        value: "others",
        label: "Others",
        children: [
          {
            value: "dialog",
            label: "Dialog",
          },
          {
            value: "tooltip",
            label: "Tooltip",
          },
          {
            value: "popover",
            label: "Popover",
          },
          {
            value: "card",
            label: "Card",
          },
          {
            value: "carousel",
            label: "Carousel",
          },
          {
            value: "collapse",
            label: "Collapse",
          },
        ],
      },
    ],
  },
  {
    value: "resource",
    label: "Resource",
    children: [
      {
        value: "axure",
        label: "Axure Components",
      },
      {
        value: "sketch",
        label: "Sketch Templates",
      },
      {
        value: "docs",
        label: "Design Documentation",
      },
    ],
  },
];

const pageStatus = reactive({
  FeatureTable: true,
  layer: true,
  sources: true,
  rgLayer: true,
  rgSource: true,
});
/**
 * mapstore node contextMenu click
 * @param e
 */
const storeNodeMenuItem = (e) => {
  console.info(e);
  if (mapLayer.value) {
    mapLayer.value.addTable2Layer(e);  // 调用子组件的方法
  } 
};
const layerNodeMenuItem = (e) => {
  console.info(e);
  if (mapLayer.value) {
    mapTable.value.showTableData(e);  // 调用子组件的方法
  } 
};
 
const changeHide = () => {
  pageStatus.FeatureTable = false;
};
const changeLayerHide = () => {
  pageStatus.layer = false;
};
const changeSourcesHide = () => {
  pageStatus.sources = false;
};
const changeRgLayerHide = () => {
  pageStatus.rgLayer = false;
};
const changeRgSourcesHide = () => {
  pageStatus.rgSource = false;
};
const changeViewDialog = (t) => {
  pageStatus[t] = true;
};
onMounted(() => {
  dragControllerLR();
  dragControllerUD();
  dragControllerRL();
  const iconfontLink = document.createElement("link");
  iconfontLink.rel = "stylesheet";
  iconfontLink.href = "//at.alicdn.com/t/c/font_4761705_r3f1mj311j.css";
  document.head.appendChild(iconfontLink);
  const iconfontLinks = document.createElement("script");

  iconfontLinks.src = "//at.alicdn.com/t/c/font_4761705_gj4fbbvqc4i.js";
  document.head.appendChild(iconfontLinks);
});

// 左右拖动事件（原左侧拖动逻辑）
function dragControllerLR() {
  var resize = document.getElementsByClassName("resize");
  var left = document.getElementsByClassName("left");
  var mid = document.getElementsByClassName("mid");
  var box = document.getElementsByClassName("box");
  var right = document.getElementsByClassName("right");
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e) {
      //颜色改变提醒
      var startX = e.clientX;
      resize[i].left = resize[i].offsetLeft;
      var rightw = right[0].offsetWidth;
      // 鼠标拖动事件
      var m = mid[1].clientWidth;
      var maxT = box[0].clientWidth - resize[i].offsetWidth - rightw; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
      document.onmousemove = function (e) {
        var endX = e.clientX;
        var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度

        if (moveLen < 150) {
          moveLen = 150;
          left[j].style.width = moveLen + "px";
          return;
        } // 左边区域的最小宽度为50px
        if (moveLen > maxT - 250) {
          moveLen = maxT - 250;
          left[j].style.width = moveLen + "px";
          return;
        } //右边区域最小宽度为150px
        resize[i].style.left = moveLen; // 设置左侧区域的宽度
        for (let j = 0; j < left.length; j++) {
          left[j].style.width = moveLen + "px";
          mid[1].style.width = m - (endX - startX) + "px";
        }
      };
      // 鼠标松开事件
      // eslint-disable-next-line no-unused-vars
      document.onmouseup = function (evt) {
        //颜色恢复
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      };
      resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false;
    };
  }
}

// 上下拖动事件
function dragControllerUD() {
  const resize = document.getElementsByClassName("move");
  const topBox = document.getElementsByClassName("topBox");
  const downBox = document.getElementsByClassName("downBox");
  const box = document.getElementsByClassName("mid");
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e) {
      // 颜色改变提醒
      const startY = e.clientY;

      resize[i].top = resize[i].offsetTop;
      const initialTop = topBox[i].offsetHeight;
      console.dir(resize[i]);

      // 鼠标拖动事件
      document.onmousemove = function (e) {
        const endY = e.clientY;
        let moveLen = initialTop + (endY - startY);
        const maxT = box[i].clientHeight - resize[i].offsetHeight;
        if (moveLen < 150) moveLen = 150;
        if (moveLen > maxT - 150) moveLen = maxT - 150;

        resize[i].style.top = moveLen + "px";
        topBox[i].style.height = moveLen + "px";
        downBox[i].style.height = box[i].clientHeight - moveLen - 10 + "px";
      };
      // 鼠标松开事件
      document.onmouseup = function () {
        // 颜色恢复
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture();
      };
      resize[i].setCapture && resize[i].setCapture();
      return false;
    };
  }
}

// 右侧拖动控制函数
function dragControllerRL() {
  const resize = document.querySelector(".resize-r");
  const left = document.querySelector(".left");
  const mid = document.getElementsByClassName("mid")[1];
  const box = document.querySelector(".box");
  const right = document.querySelector(".right");
  const resizeWidth = resize.offsetWidth; // 获取右侧侧边栏宽度

  // 鼠标按下事件
  resize.onmousedown = function (e) {
    // 颜色改变提醒
    const startX = e.clientX;
    const initialLeft = resize.offsetLeft;
    const initialMidWidth = mid.offsetWidth;
    const initialRightWidth = right.offsetWidth;
    const boxWidth = box.offsetWidth;
    const leftWidth = left.offsetWidth;
    const resizeLWidth = document.querySelector(".resize").offsetWidth; // 获取左侧侧边栏宽度

    // 鼠标拖动事件
    document.onmousemove = function (e) {
      const endX = e.clientX;
      const moveLen = endX - startX; // 计算鼠标移动的距离

      let newMidWidth = initialMidWidth + moveLen;
      let newRightWidth = initialRightWidth - moveLen;

      // 设置中间和右边的最小宽度限制，并考虑侧边栏宽度
      const minMidWidth = 150;
      const minRightWidth = 150;
      const availableWidth = boxWidth - leftWidth - 20; // 可分配的宽度（除去两边侧边栏宽度）
      if (newMidWidth <= minMidWidth) {
        newMidWidth = minMidWidth;
        newRightWidth = availableWidth - minMidWidth;
      }
      if (newRightWidth <= minRightWidth) {
        newRightWidth = minRightWidth;
        newMidWidth = availableWidth - minRightWidth;
      }

      mid.style.width = newMidWidth + "px";
      right.style.width = newRightWidth + "px";
      // 精准设置resize-r的位置，使其始终在中间和右边的交界处
    };

    // 鼠标松开事件
    document.onmouseup = function () {
      // 颜色恢复
      document.onmousemove = null;
      document.onmouseup = null;
      resize.releaseCapture && resize.releaseCapture();
    };

    resize.setCapture && resize.setCapture();
    return false;
  };
}
</script>

<style lang='scss'>
.box .iconfont {
  width: 24px;
  height: 24px;
  font-size: 24px;
  cursor: pointer;
}
.iconfont:hover {
  border: 1px solid #d3cdcd;
  border-radius: 2px;
}
.box {
  .el-tree-node > .el-tree-node__children {
    overflow: unset;
  }
}
</style>
<style lang='scss' scoped>
.center-status {
  display: flex;
  flex-direction: column;
}
.center-status .topBox {
  flex: 1;
}
.box {
  padding: 0;
  padding-bottom: 0;
  width: calc(100%);
  height: calc(100vh - 50px);
  overflow: hidden;
  background-color: #ece7e7;
  display: flex;
}

/* 左侧div样式 */
.left,
.right {
  width: calc(20%); /* 左侧初始化宽度 */
  height: 100%;
  .mid {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .topBox {
    width: 100%;
    flex: auto;
  }
  .downBox {
    width: 100%;
    flex: auto;
  }

  .move {
    cursor: s-resize;
    width: 50px;
    height: 5px;
    margin: 0 auto;
    border-radius: 5px;
    text-align: center;
    line-height: 3px;
    font-size: 32px;
    color: white;
  }
}

/* 拖拽区div样式（原左侧拖动区域样式） */
.resize,
.resize-r {
  cursor: w-resize;
  position: relative;
  top: 0;
  width: 5px;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* 右侧div'样式 */
.mid {
  width: calc(60% - 20px); /* 右侧初始化宽度 */
  flex: 1;
  height: 100%;

  /* 上方div'样式 */
  .topBox {
    height: 60%;
    display: flex;
  }
  /* 下方div'样式 */
  .downBox {
    height: calc(25% - 5px);
    display: flex;
  }
  /* 拖拽区div样式（原上下拖动区域样式） */
  .move {
    cursor: s-resize;
    width: 100%;
    height: 5px;
  }
}

/* 新增的右侧拖动区域样式 */
.resize-right {
  cursor: e-resize;
  position: relative;
  top: 45%;
  border-radius: 5px;
  margin-top: -10px;
  width: 5px;
  height: 50px;
  background-size: cover;
  background-position: center;
  font-size: 32px;
  color: white;
}

/* 右侧div样式 */
.right {
  width: calc(20%); /* 可以根据需求调整初始宽度 */
  height: 100%;
}
</style>